<template>
	<view class="product-grid" :style="{ background: backColor }">
		<view class="product-item" v-for="(item, index) in productList" :key="index">
			<view>
				<view class="product-image-container" @click="goodsUrl(listingBool ? item.axGood.id : item.id)">
					<image :src="path + item.goodImg.split(',')[0]" mode="aspectFill" class="product-image"></image>
				</view>
				<view class="product-info">
					<view class="product-title">{{ item.goodName }}</view>
					<view class="number" v-if="listingBool">数量：{{ item.totalNum }}</view>
					<view class="right-bottom">
						<text>
							<span>￥</span>
							{{ item.price || item.todayPrice }}
						</text>
						<view v-if="listingBool">
							<button class="listing-btn" @click="listingClick(item)">一键出售</button>
						</view>
						<view v-else>
							<view v-if="getBotTime(item) == 1" class="right-time">
								<u-count-down
									:timestamp="countTime"
									color="#fff"
									bg-color="transparent"
									separator-color="#fff"
									font-size="20"
									height="15"
									separator-size="26"
								></u-count-down>
							</view>
							<view v-else-if="getBotTime(item) == 2" class="timeClass">
								<image src="/static/goods_details/yu.png" style="width: 24rpx; height: 24rpx" mode="aspectFill"></image>
								<span>预售中</span>
							</view>
							<view v-else-if="getBotTime(item) == 0" class="timeClass">
								<image src="/static/goods_details/wan.png" style="width: 24rpx; height: 24rpx" mode="aspectFill"></image>
								<span>已结束</span>
							</view>
							<view v-else-if="getBotTime(item) == 3" class="timeClass">
								<image src="/static/goods_details/pai.png" style="width: 24rpx; height: 24rpx" mode="aspectFill"></image>
								<span>拍卖中</span>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/api/index.js';
import { getBotTime, getCountTime } from '@/utils/utils.js';
export default {
	name: 'ProductList',
	props: {
		productList: {
			type: Array
		},
		backColor: {
			type: String,
			default: '#f8f8f8'
		},
		listingBool: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			botTime: 3, //0结束，1即将售卖时间，2预售时间，3售卖中
			path: api.getPath(),
			countTime: 0
		};
	},
	methods: {
		getBotTime(item) {
			const bTime = getBotTime(item);
			if (bTime == 1 && !this.countTime) {
				this.countTime = getCountTime(item);
			}
			return bTime;
		},
		goodsUrl(id) {
			uni.navigateTo({
				url: '/pages/goods_details/goods_details?id=' + id
			});
		},
		listingClick(item) {
			this.$emit('str-show', item);
		}
	}
};
</script>

<style lang="scss" scoped>
.number {
	font-size: 24rpx;
	color: #636363;
}
.timeClass {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 112rpx;
	height: 36rpx;
	background: #fff8f6;
	border-radius: 35rpx 35rpx 35rpx 35rpx;
	font-size: 20rpx;
	color: #f05a39;
	image {
		margin-right: 7rpx;
	}
}
.listing-btn {
	width: 128rpx;
	height: 48rpx;
	background: linear-gradient(269deg, #f26f43 0%, #f34836 100%);
	border-radius: 166rpx 166rpx 166rpx 166rpx;

	font-size: 24rpx;
	color: #ffffff;
	line-height: 48rpx;
}
.product-grid {
	display: flex;
	flex-wrap: wrap;
	padding: 0 20rpx;

	border-radius: 25rpx 25rpx 0 0;

	.product-item {
		width: calc(50% - 20rpx);
		margin: 10rpx;
		padding-top: 30rpx;
		border-radius: 16rpx;
		overflow: hidden;

		.product-image-container {
			width: 100%;
			height: 300rpx;
			overflow: hidden;
			.product-image {
				width: 100%;
				height: 100%;
				border-radius: 25rpx;
			}
		}
	}
}

.right-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	text {
		font-family: MiSans, MiSans;
		font-weight: 500;
		font-size: 30rpx;
		color: #f05a39;
		text-align: center;
		font-style: normal;
		text-transform: none;
		span {
			font-size: 23rpx;
		}
	}
	.right-time {
		margin-left: 15rpx;
		padding-right: 20rpx;
		width: 150rpx;
		height: 35rpx;
		background: url('@/static/main/time.png') no-repeat;
		background-size: 144.71rpx 34rpx;
		display: flex;
		align-items: center;
		justify-content: end;
	}
}

.product-info {
	padding: 20rpx;
	background-color: #fff;
	min-height: 130rpx;
}

.product-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 16rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.product-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.product-points {
	font-size: 24rpx;
	color: #ff6b35;
	font-weight: bold;
}

.countdown {
	display: flex;
	align-items: center;
}

.countdown-text {
	font-size: 22rpx;
	color: #ff6b35;
	margin-left: 6rpx;
}

.tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #fff;
	display: flex;
	border-top: 1rpx solid #eee;
	padding-bottom: env(safe-area-inset-bottom);
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 22rpx;
	color: #999;
}

.tab-item.active {
	color: #ff6b35;
}

.tab-item u-icon {
	margin-bottom: 4rpx;
}
</style>
